<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--  关闭缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--  一会试验下是否有必要存在 -->
<meta name="apple-touch-fullscreen" content="yes"> 
<!--网站开启对 web app 程序的支持。-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--在 web app 应用下状态条（屏幕顶部条）的颜色；-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--使设备浏览网页时对数字不启用电话功能-->
<meta name="format-detection" content="telephone=no">
<!--使用wtai协议进行拨打电话。-->
<meta http-equiv="x-rim-auto-match" content="none"/>
<!--标示移动站点-->
<meta name="HandheldFriendly" content="true"/>
<title>无标题文档</title>
<link rel="stylesheet" href="swiper.min.css" type="text/css"/>
<link rel="stylesheet" href="animate.min.css" type="text/css"/>
<style type="text/css">
body{font-size:22px; max-width:640px;margin:0px auto;padding:0px;font-family:"微软雅黑"}
ul,li,img,h1,p,span,tr,td,dl,dt,dd{margin:0px;padding:0px;}
li{list-style:none} img{border:0px}
.swiper-container{width:100%;height:200px;}
.swiper-wrapper{text-align:center;line-height:200px;}
</style>
</head>

<body>

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" style="background:#039">
        	<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slide 1</p>
            <!--
            	swiper-animate-effect：切换效果，例如 fadeInUp 
                swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
                swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
            -->
        </li>
        <li class="swiper-slide" style="background:#039">
        	<p class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slide 2</p>
        </li>
        <li class="swiper-slide" style="background:#039">
        	<p class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slide 3</p>
        </li>
    </ul>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
</div>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="swiper.min.js" type="text/javascript"></script>
<script src="swiper.animate.min.js" type="text/javascript"></script>
<script type="text/javascript">        
  var mySwiper = new Swiper ('.swiper-container', {
    loop: false, // true无限循环切换,默认false
    pagination: '.swiper-pagination',// 如果需要分页器
    nextButton: '.swiper-button-next',// 如果需要前进按钮
    prevButton: '.swiper-button-prev',// 如果需要后退按钮
	autoplay : 2000,// 自动切换的时间间隔,不设定该参数slide不会自动切换。
	autoplayDisableOnInteraction : false,// 用户操作swipe之后，是否禁止自动切换。默认为true：停止。
	
	//一下为动画效果的设置
	onInit: function(swiper){ 
    swiperAnimateCache(swiper); 
		swiperAnimate(swiper); 
	}, 
	onSlideChangeEnd: function(swiper){ 
		swiperAnimate(swiper); 
	}
  })        
</script>
</body>
</html>
